index.css

 index.css

*{margin: 0;

padding: 0;

font-family: 'Playball', cursive;}

/* navBar styling */

#navBar::before{content: "";background-color: black;position: absolute;width: 96%;height: 12%;z-index: -1;opacity:0.6;border-radius: 10px;}

#navBar{display:flex;margin:10px 10px;}

#navBar .list ul{display: flex;list-style-type: none;margin-top:2rem;}

#navBar .list li a{margin:0 2rem;text-decoration: none;font-size: 2rem;color: white}

#navBar .list li a:hover{margin:0 2rem;text-decoration: none;color: black;background-color: white;border-radius: 0.3rem;}

#navBar .logo img{height:5rem;width: 6rem;margin:0.4rem;margin-left: 4rem; }

/* Home Content Styling */

#home{display: flex;flex-direction: column;align-items: center;margin-top: 10px;  padding:2rem;height: 34rem;}

#home::before{background-image: url(./img/water.jpg) ; background-size: cover ;

    background-repeat: no-repeat ;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 120%;

    z-index: -1;

    opacity: 0.6;

   }

   #home p{font-size: 1.4rem;margin: 0.2rem;}

   #home button{border-radius: 1rem;margin: 8px;}

   #home button a{font-size: 1.5rem;text-decoration: none;padding:0.2rem;}

   /* about Styling */

   #about{display: flex;height:109vh;background-color:rgb(212 212 255) ;justify-content: center;}

  #about img{height: 15rem;width: 12rem;display: block;margin: auto;}

  #about .box{border: rgb(25, 0, 255) solid 1px;display: block;background-color:#e9f8ff;margin: 15px;padding:8px;border-radius:13px;}

  /*nature Styling*/

  #nature::before{background-image: url(./img/heaven.jpg) ; background-size: cover ;

    background-repeat: no-repeat ;

    content: "";

    position: absolute;

       width: 100%;

    height: 59vh;

    z-index: -1;

    opacity: 0.6;

   }

  #natureImage{height: 50vh;width: 100vw;display: flex;justify-content: center;align-items: center;}

 

  #natureImage .card img{height:30vh;width:20vw;margin:10px;border-radius: 10px;}

  /*Form*/

  #form::before{background-image: url(./img/happy.jpg) ;

     background-size: cover ;

    background-repeat: no-repeat ;

    content: "";

    position: absolute;

       width: 100%;

    height: 60vh;

    z-index: -1;

    opacity: 0.6;

   }

   #form{overflow: hidden;}

  #formGroup{text-align: center;margin: 1rem;font-size: 1.5rem;}

   

   /*Utility Heading Styling*/

   .h-primary{margin:0rem;font-size: 3rem;}

   .h-secondary{margin:0.2rem;font-size: 2rem;}

   .center{text-align: center;margin:0rem;}

   .center1{text-align: center;margin:1rem;}

    .fontMed{font-size:1.0rem;}